import React, { PropTypes, Component } from 'react';//引入react包，用于编写react组件
import { Row, Col, Spin } from 'antd';//引入蚂蚁金服的antUI组件中的row和col（栅格），管理布局
// import ECharts from 'echarts-for-react';//引入react-echarts包，实现echarts实现
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import 'echarts/lib/chart/line';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import moment from 'moment';
import * as fetch from '../../utils/http'

class ReactEcharts extends React.Component {
    constructor(props) {
        super(props);
        //初始化修改状态属性
        this.state = {
            chartXData: this.props.chartXData,
            chartYData: this.props.chartYData,
        }
    }
    componentDidMount() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var seriesData = [];
        const ydata = this.state.chartYData;
        const xdata = this.state.chartXData;
        var i = 0;
        ydata.map((item) => {
            seriesData.push({
                name: item.name,
                type: 'line',
                data: item.value,
                yAxisIndex: i,
                animation: false,
                lineStyle: {
                    width: 1
                },
            });
            ++i;
        });
        console.log(seriesData);
        // 绘制图表
        myChart.setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#505765'
                    }
                }
            },

            legend: {
                data: this.props.legendData,//Tag名称
            },
            //布局设置，类似于margin
            grid: {
                bottom: 30,
                containLabel: true,
            },
            //X轴数据设置dateArray
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    axisLine: { onZero: false },
                    data: xdata
                }
            ],
            yAxis: function () {
                var yAxisData = [];
                var i = 0;
                var count = ydata.length;
                var avg = count / 2;
                var offset = -50;
                var position = 'left';
                ydata.map((item) => {
                    if (i == avg) {
                        offset = -50;
                        position = 'right';
                    }
                    offset += 50;
                    yAxisData.push({
                        name: item.name,
                        type: 'value',
                        max: parseInt(item.highAxis),
                        min: parseInt(item.lowAxis),
                        position: position,
                        offset: offset
                    });
                    i++;
                });

                return yAxisData;
            }(),
            //折线图图标和线条设置以及Y轴数据设置rateArray
            series: seriesData
        });
        this.timerID = setInterval(
            () => {
                this.getChartData();
                var seriesData1 = [];
                const ydata1 = this.state.chartYData;
                const xdata1 = this.state.chartXData;
                var i = 0;
                ydata1.map((item) => {
                    seriesData1.push({
                        name: item.name,
                        type: 'line',
                        data: item.value,
                        yAxisIndex: i,
                        animation: false,
                        lineStyle: {
                            width: 1
                        },
                    });
                    ++i;
                });
                // 绘制图表
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            animation: false,
                            label: {
                                backgroundColor: '#505765'
                            }
                        }
                    },

                    legend: {
                        data: this.props.legendData,//Tag名称
                    },
                    //布局设置，类似于margin
                    grid: {
                        bottom: 30,
                        containLabel: true,
                    },
                    //X轴数据设置dateArray
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            axisLine: { onZero: false },
                            data: xdata1
                        }
                    ],
                    yAxis: function () {
                        var yAxisData = [];
                        var i = 0;
                        var count = ydata1.length;
                        var avg = count / 2;
                        var offset = -50;
                        var position = 'left';
                        ydata1.map((item) => {
                            if (i == avg) {
                                offset = -50;
                                position = 'right';
                            }
                            offset += 50;
                            yAxisData.push({
                                name: item.name,
                                type: 'value',
                                max: parseInt(item.highAxis),
                                min: parseInt(item.lowAxis),
                                position: position,
                                offset: offset
                            });
                            i++;
                        });

                        return yAxisData;
                    }(),
                    //折线图图标和线条设置以及Y轴数据设置rateArray
                    series: seriesData1
                });
            },
            5000
        );
    }

    componentWillUnmount() {
        clearInterval(this.timerID);
    }

    getChartData() {
        let tag = this.props.chartTags.join("|");
        if (!tag) {
            console.log("tag请求失败");
            return;
        }
        fetch.get('RealTime/GetRealTimeDataByMoreSteps?tags=' + tag).then(res => {
            var allData = this.state.chartYData;
            var timeData = this.state.chartXData;
            timeData.splice(0, 1);
            const now = moment();
            timeData.push(now.format('YYYY-MM-DD HH:mm:ss'));
            //每条数据去掉第一条，然后再添加一条新的
            var newAllData = [];
            allData.map((item) => {
                item.value.splice(0, 1);
                var newData = res.data.filter(function (i) {
                    return i.tagChartName == item.name
                });

                var lowAxis = newData[0].lowAxis;
                var highAxis = newData[0].highAxis;
                item.value.push(newData[0].value);
                newAllData.push({
                    name: item.name,
                    value: item.value,
                    lowAxis: lowAxis,
                    highAxis: highAxis
                });
            })
            this.setState({
                chartXData: timeData,
                chartYData: newAllData
            })
        })
    }




    render() {
        if (this.props.showChart) {
            return (<div style={{ textAlign: 'center', height: 460 }}><Spin style={{ marginTop: '15%' }} /></div>);
        }
        return (
            <div id="main" style={{ width: '100%', height: 600 }}></div>
        );
    }

}

//定义组件默认的属性值(如果父组见没有传递数据，使用默认数据)
ReactEcharts.defaultProps = {};
//校验从父组件传递的属性值是否符合
ReactEcharts.propTypes = {};
//将ReactEcharts组建开放，其他组件只要在文件开始引入改组件即可引用
export default ReactEcharts;
